<template>
  <div class="contentShadow">
    <el-container>
      <el-header style="margin-bottom: 30px">
        <h1>社会实践表</h1>
        <el-tag>学号：{{ studentId }}</el-tag>
      </el-header>
      <el-main>
        <el-form v-for="(item,index) in domains" :key="index" :ref="'practice' + index" :model="domains[index]"
                 style="text-align:left" :inline="false">
          <el-form-item class="formItemHeader" label="社会实践编号" prop="id" :rules="{
                                required: true, message: '社会实践不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.id" type="text" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="日期" prop="practiceDate" :rules="{
                                required: true, message: '日期不能为空', trigger: 'blur'
                                }">
            <el-date-picker v-model="item.practiceDate" value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </el-form-item>
          <el-form-item class="formItemHeader" label="计划名称" prop="practiceName" :rules="{
                                required: true, message: '计划名称不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.practiceName" type="text"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="计划主办方" prop="practiceSponsor" :rules="{
                                required: true, message: '计划主办方不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.practiceSponsor" type="text"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="活动主题" prop="practiceTheme" :rules="{
                                required: true, message: '活动主题不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.practiceTheme" type="text"></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="职务" prop="practiceWork" :rules="{
                                required: true, message: '职务不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.practiceWork" type=text></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader" label="时长" prop="practiceLength" :rules="{
                                required: true, message: '时长不能为空', trigger: 'blur'
                                }">
            <el-input v-model="item.practiceLength" type=text></el-input>
          </el-form-item>
          <el-form-item class="formItemHeader">
            <el-button class="formBtn" icon="el-icon-delete" type="danger"
                       @click="removeDomain(index)"></el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="formBtn" type="primary" @click="submitPractice(index)" :loading="loading">提交</el-button>
          </el-form-item>

        </el-form>
      </el-main>
      <el-button class="formBtn" icon="el-icon-plus" type="success" @click="addDomain"></el-button>
    </el-container>

  </div>
</template>
<script>
import {getStudentInfo, getPractice, addPractice, deleteResearch, deletePractice} from "@/api/student";

export default {
  data() {
    return {
      studentId: '',
      domains: [],
      timestamp: '',
      loading: false,
    };
  },
  mounted() {
    getStudentInfo().then((res) => {
      this.studentId = res.data.studentId;
    });
    getPractice().then((res) => {
      this.domains = res.data;
      console.log(this.domains);
    });
  },
  components: {},
  methods: {
    submitPractice(index) {
      this.timestamp = Date.now().toString();
      this.$nextTick(() => {
        this.$refs["practice" + index.toString()][0].validate(valid => {
          if (valid) {
            this.loading = true;
            // 传给后端的值
            const params = this.domains[index]
            console.log(params)
            addPractice(params).then(res => {
              // console.log(res)
              // console.log(res.message)
              if (res.code === 50003) {
                this.$message.error(res.msg)
              } else {
                getPractice().then((res0) => {
                  this.domains = res0.data;
                  // console.log(this.domains);
                });
                this.$message.success(res.msg)
              }
              this.loading = false
            })
          } else {
            //console.log("发生异常");
            this.$message.error("请按正确格式填写表单")
            this.loading = false;
            return false;
          }
        });
      })
    },
    removeDomain(index) {
      this.$confirm('确定删除此记录吗？', '提示').then(() => {
        if (this.domains[index].id !== 0) {
          deletePractice({id: this.domains[index].id}).then((res) => {
            if (res.code === 200) {
              console.log(res)
              this.$message.success("删除成功")
            } else {
              this.$message.error("删除失败")
            }
          })
        }
        this.domains.splice(index, 1)
      }).catch(() => {
      });
    },
    addDomain() {
      this.domains.push({
        id: 0,
        practiceDate: null,
        practiceName: '',
        practiceSponsor: '',
        practiceTheme: '',
        practiceWork: '',
        practiceLength: ''
      });
    }
  }
};
</script>
<style>


.formItemHeader {
//display: inline-block; //margin-right: 10px; //width: 30%; margin-bottom: 20px;
}

.formItemHeader:last-of-type {
//width: 400px;
}

.formBtn {
  width: 100%;
}
</style>
